<template>
	<view style="touch-action: none;" :style="viewColor">
		<view class="home" style="position:fixed;" :style="{ top: top + 'px', bottom: bottom }" id="right-nav"
			@touchmove.stop.prevent="setTouchMove">
			<view class="homeCon" :class="homeActive === true ? 'on' : ''" v-if="homeActive">

				<!-- <navigator hover-class='none' url='/pages/index/index' open-type='redirect' class='iconfont icon-shouye-xianxing'></navigator>
				
				<navigator hover-class='none' url='/pages/index/index' open-type='redirect' class='iconfont icon-shouye-xianxing'></navigator>
				<navigator hover-class='none' url='/pages/goods_cate/goods_cate' open-type='redirect' class='iconfont icon-fenleiyemian'></navigator>
				<navigator hover-class='none' url='/pages/plant_grass/index' open-type='redirect' class='iconfont icon-shouye4'></navigator>
				<navigator hover-class='none' url='/pages/order_addcart/order_addcart' open-type='redirect' class='iconfont icon-caigou-xianxing'></navigator>
				<navigator hover-class='none' url='/pages/user/index' open-type='redirect' class='iconfont icon-yonghu1'></navigator>
			 -->

				<view class="btn-box">
					<view class="iconfont" :class="item.class" v-for="(item,index) in itemList"
						@click="clickItem(item)"></view>
				</view>


			</view>
			<view @click="open" class="pictrueBox">
				<view class="pictrue">
					<image
						:src="homeActive === true ? '/static/images/navbtn_open.gif' : '/static/images/navbtn_close.gif'"
						class="image pictruea" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	const app = getApp();


	const orginList = [{
		'id': 1,
		'url': '/pages/index/index',
		'class': 'yyfont yy-shouye',
	},{
		'id': 2,
		'url': '/pages/goods_cate/goods_cate',
		'class': 'icon-fenleiyemian',
	}, {
		'id': 3,
		'url': '/pages/plant_grass/index',
		'class': 'yyfont yy-shequ-active',
	}, {
		'id': 4,
		'url': '/pages/order_addcart/order_addcart',
		'class': 'icon-caigou-xianxing',
	}];
	
	const newList1 = [{
		'id': 0,
		'url': '/pages/shops/index/index',
		'class': 'icon-shouye-xianxing',
	}, ...orginList];
	const newList2 = [...orginList, {
		'id': 5,
		'url': '/pages/user/index',
		'class': 'icon-yonghu1',
	}];


	export default {
		name: "Home",
		props: {
			ishome: {
				type: Number,
				default: 0
			}
		},
		data: function() {
			return {
				domain: HTTP_REQUEST_URL,
				top: "",
				bottom: "",
				itemList: [],
			};
		},
		computed: mapGetters(["homeActive", "viewColor", "keyColor", 'routeError']),
		methods: {
			setTouchMove(e) {
				var that = this;
				if (e.touches[0].clientY < 545 && e.touches[0].clientY > 66) {
					that.top = e.touches[0].clientY
					that.bottom = "auto";
					// that.setData({
					// 	top: e.touches[0].clientY
					// })
				}
			},
			open: function() {
				console.log(456)
				this.homeActive ?
					this.$store.commit("CLOSE_HOME") :
					this.$store.commit("OPEN_HOME");
			},
			clickItem(item) {
				this.$store.commit("CLOSE_HOME");
				if (item.id == 0) {
					uni.setStorageSync('YY_SHOP_IDX', item.id);
					uni.switchTab({
						url: item.url
					})
				} else {

					// let oldIdx = uni.getStorageSync('YY_SHOP_IDX');
					// console.log('rk==>[get]' + oldIdx)
					// console.log('rk==>[get1]' + item.id);
					// if (oldIdx == item.id) {
					// 	return
					// }
					uni.setStorageSync('YY_SHOP_IDX', item.id);
					if (item.id == 1) {
						if(this.ishome==1){
							uni.showLoading({
								title:'当前页面已经是药店首页'
							})
							setTimeout(function () {
								uni.hideLoading();
							}, 1000)
							return			
						}else{
							uni.navigateBack({
								url: item.url
							})
						}
						
					} else {
						uni.navigateTo({
							url: item.url
						})
					}

				}
			}
		},
		created() {
			this.bottom = "50px";

		},
		mounted() {
			//console.log("rk===>[flage]" + this.routeError);
			this.$nextTick(() => {
				if (this.routeError) {
					this.itemList = newList2;
				} else {
					this.itemList = newList1;
				}
			})
		}
	};
</script>

<style scoped>
	.pictrueBox {
		width: 130rpx;
		height: 120rpx;
	}

	/*返回主页按钮*/
	.home {
		position: fixed;
		color: white;
		text-align: center;
		z-index: 9999;
		right: 15rpx;
		display: flex;
	}

	.home .homeCon {
		border-radius: 50rpx;
		opacity: 0;
		height: 0;
		color: #e93323;
		width: 0;
	}

	.home .homeCon.on {
		opacity: 1;
		animation: bounceInRight 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
		width: 500rpx;
		height: 86rpx;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--view-theme);
	}

	.btn-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.home .homeCon .iconfont {
		font-size: 48rpx;
		color: #fff;
		display: inline-block;
		margin: 0 auto;
	}

	.home .pictrue {
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
		margin: 0 auto;
		background-color: var(--view-theme);
		box-shadow: 0 5rpx 12rpx rgba(0, 0, 0, 0.5);
	}

	.home .pictrue .image {
		width: 100%;
		height: 100%;
	}

	.pictruea {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		vertical-align: middle;
	}
</style>
